<template>
  <a-modal
    :title="title"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="close"
  >
    <template slot="footer">
      <a-button @click="close">{{$t('关闭')}}</a-button>
    </template>
    <a-spin :spinning="confirmLoading" style="padding: 0 20px;">
      <div><span style="font-weight:600;color:#000">{{$t('我的收藏')}}</span></div>
      <div style="padding: 20px 0">
        <a class="mitem" v-for="menu in collections" :key="menu.permissionId" @click="toLink(menu)" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" style="padding-bottom:10px;">
          <span>{{menu.permissionName}}</span>
          <a-icon
            class="star-icon0"
            type="star"
            theme="filled"
            :style="{
              color: 'orange',
              cursor: 'pointer',
              opacity: 0,
              transition: 'opacity 0.3s',
              paddingRight: '16px'
            }"
            @click="(event) => handleFavClick(event, menu)"
          />
        </a>
      </div>
      <div><span style="font-weight:600;color:#000">{{$t('功能搜索')}}</span></div>
      <div style="padding: 20px 0">
        <span style="color:#000">{{$t('名称')}}：</span>
        <a-input v-model="search" style="color:#000;width:300px" :placeholder="$t('请输入菜单名称')" @pressEnter="searchMethods" />
        <a-button type="primary" @click="searchMethods" style="margin-left: 10px">{{$t('搜索')}}</a-button>
      </div>
      <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
        <a class="mitem" v-for="menu in list" :key="menu.id" @click="toLink1(menu)" style="padding-bottom:10px;">
          <span style="padding-right: 30px">{{menu.meta.title}}</span>
        </a>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
  import { deleteAction, getAction } from '@/api/manage'
  import { mapGetters } from 'vuex'
  export default {
    name: "SearchMenuModal",
    data () {
      return {
        title:this.$t('功能搜索'),
        modalWidth:1000,
        visible: false,
        confirmLoading: false,
        collections: [],
        searchMenuOptions: [],
        list: [],
        search: ''
      }
    },
    methods: {
      ...mapGetters(['userInfo']),
      show(list){
        this.search = '';
        this.visible = true;
        this.searchMenuOptions = list;
        this.list = [];
        this.getCollention();
      },
      close () {
        this.visible = false;
      },
      getCollention() {
        getAction('/sys/myCollection/list', { userId: this.userInfo().id }).then((res) => {
          if (res.success) {
            this.collections = res.result
          } else {
            this.collections = []
          }
        })
      },
      handleMouseEnter(event) {
        event.target.querySelector('.star-icon0').style.opacity = 1
      },
      handleMouseLeave(event) {
        event.target.querySelector('.star-icon0').style.opacity = 0
      },
      toLink(menu) {
        this.visible = false
        this.$router.push({
          path: menu.url,
        })
      },
      toLink1(menu){
        this.visible = false
        this.$router.push({
          path: menu.path,
        })
      },
      handleFavClick(event, menu) {
        event.stopPropagation() // 阻止事件冒泡
        event.preventDefault() // 阻止默认行为（如果有）
        // 切换收藏状态，使用 Vue.set 确保响应式
        // 这里可以添加你的收藏逻辑，比如发送请求到后端保存收藏状态
        deleteAction('/sys/myCollection/delete', {
          id: menu.permissionId,
        }).then((res) => {
          if (res.success) {
            this.getCollention(true)
            this.$emit('cancleFav', menu.permissionId)
          }
        })
      },
      searchMethods() {
        if(this.search){
          this.list = this.searchMenuOptions.filter((item) => {return item.meta.title.toLowerCase().indexOf(this.search.toLowerCase())>-1})
        }else{
          this.list = []
        }
      },
    }
  }
</script>

<style>
a.mitem{
  color: #000;
}
a.mitem:active{
  color: #18900d;
}
</style>